<template>
  <div class="my">
    <van-sticky class="nav">
      <!-- 顶部导航 -->
      <van-nav-bar class="topNaV" @click-left="onClickLeft">
        <template #title>
          <p class="title">我的收藏</p>
        </template>
        <template #left>
          <van-icon name="arrow-left" color="#666666" />
          <p class="left">返回</p>
        </template>
      </van-nav-bar>
    </van-sticky>
    <!-- 商品列表 -->
    <div class="goods">
      <div
        v-for="item in list"
        :key="item.id"
        class="good-list"
        @click="goDetail(item.id)"
      >
        <img :src="item.list_pic_url" alt="" class="good-img" />
        <p class="good-name">{{ item.name }}</p>
        <p class="good-price">{{ item.retail_price }}起</p>
      </div>
    </div>

    <!-- <van-row type="flex" justify="space-around" class="list-container">
      <van-col
        span="10"
        v-for="item in list"
        :key="item.id"
        class="list-content"
        @click="goDetail(item.id)"
      >
        <img :src="item.list_pic_url" alt="" class="list-img" />
        <p>{{ item.name }}</p>
        <p>{{ item.retail_price }}起</p>
      </van-col>
    </van-row> -->
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { collect } from '@/api/index'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const list = ref([])
const store = useStore()
const router = useRouter()
collect({ openId: store.state.openId }).then(res => {
  list.value = res.collectGoodsList
})
const goDetail = (id) => {
  router.push({ name: 'categoryDetail', params: { id: id } })
}
const onClickLeft = () => {
  router.back()
}
</script>
<script>
export default {
  name: 'collectionView'
}
</script>

<style scoped lang="scss">
.my {
  .nav {
    .topNav {
      .left {
        font-size: 31.2px;
        color: #666666;
        letter-spacing: 0;
        font-weight: 400;
      }

      .title {
        font-size: 36px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
  }
  .goods {
    display: flex;
    flex-wrap: wrap;
    width: 710px;
    margin: 0 auto;
    overflow: hidden;
    .good-list {
      width: 350px;
      display: flex;

      flex-wrap: wrap;
      justify-content: space-between;
      .good-img {
        width: 350px;
        height: 350px;
      }
      .good-name {
        width: 350px;
        font-size: 26px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        margin-top: 17px;
        height: 37px;
        line-height: 37px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .good-price {
        font-size: 26px;
        color: #9e4242;
        letter-spacing: 0;
        font-weight: 400;
        height: 37px;
        line-height: 37px;
        margin-top: 8px;
        margin-bottom: 44px;
        text-align: left;
      }
    }
    .good-list:nth-child(2n) {
      margin-left: 10px;
    }
  }
}
</style>
